<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章详情</title>
    <!-- Highlight.js 样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.11.1/styles/default.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@5.2.0/github-markdown.min.css">
    <link rel="stylesheet" href="/css/header.css">
    <link rel="stylesheet" href="/css/common.css">
    <link rel="stylesheet" href="/css/article.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <a href="/" class="logo">Wayne's Blog</a>
            <div class="nav">
                <a href="/" class="nav-item">首页</a>
                <a href="/categories.html" class="nav-item">分类</a>
                <a href="/tags.html" class="nav-item">标签</a>
                <a href="/about.html" class="nav-item">关于</a>
            </div>
            <div class="user-info">
                <span id="username"></span>
                <a href="javascript:void(0)" id="logout" style="display: none;">退出</a>
                <a href="/login.html" id="login" style="display: none;">登录</a>
                <a href="/register.html" id="register" style="display: none;">注册</a>
            </div>
        </div>
        <div class="content">
            <div class="article-container">
                <div class="article-header">
                    <h1 id="title"></h1>
                    <div class="article-meta">
                        <span id="author"></span>
                        <span id="createTime"></span>
                        <span id="category"></span>
                        <span id="tags"></span>
                        <span id="viewCount"></span>
                        <span id="likeCount"></span>
                        <button id="likeBtn" class="like-btn">喜欢</button>
                    </div>
                </div>
                <div class="article-content markdown-body" id="content"></div>
                
                <!-- 评论区 -->
                <div class="comment-section">
                    <h3>评论</h3>
                    <!-- 评论输入框 -->
                    <div class="comment-form">
                        <textarea id="commentContent" placeholder="写下你的评论..."></textarea>
                        <button id="submitComment" class="submit-btn">发表评论</button>
                    </div>
                    <!-- 评论列表 -->
                    <div class="comment-list" id="commentList">
                        <!-- 评论项模板 -->
                        <template id="commentTemplate">
                            <div class="comment-item">
                                <div class="comment-header">
                                    <span class="comment-author"></span>
                                    <span class="comment-time"></span>
                                </div>
                                <div class="comment-content"></div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery (layer.js的依赖) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <!-- Axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios@1.3.4/dist/axios.min.js"></script>
    <!-- Layer.js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.5.1/layer.min.js"></script>
    <!-- Marked.js -->
    <script src="https://cdn.jsdelivr.net/npm/marked@4.2.4/marked.min.js"></script>
    <!-- Highlight.js -->
    <script src="https://cdn.jsdelivr.net/npm/highlight.js@11.11.1/highlight.min.js"></script>
    <!-- 自定义脚本 -->
    <script src="/js/api.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/article.js"></script>
</body>
</html> 